<template>
  <div class="table-box basic-small">
    <div class="created-table el-main">
      <div class="left">
        <ProTable ref="proTableBox" :columns="dataGrid.columns" :tool-button="[]" :pagination="dataGrid.pagination">
          <template #tableHeader>
            <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
          </template>

          <template #operation="{ row }">
            <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
          </template>
        </ProTable>
      </div>
      <div class="right">
        <el-tabs v-model="tabsObj.activeName">
          <el-tab-pane label="表格列" name="column">
            <div class="right-table">
              <ProTable
                ref="proTableBox"
                :columns="columnsDataGrid.columns"
                :pagination="false"
                :data="columnsDataGrid.data"
                :tool-button="[]"
              >
                <template #tableHeader>
                  <GlobalButton :button-list="columnsDataGrid.headButtonList"></GlobalButton>
                </template>
                <template #operation="{ row, $index }">
                  <GlobalButton :button-list="columnsDataGrid.rowButtonList" :row-params="row" :row-index="$index"></GlobalButton>
                </template>
              </ProTable>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作按钮" name="rowBtn">
            <div class="right-table">
              <ProTable
                ref="proTableBox"
                :columns="rowDataGrid.columns"
                :pagination="false"
                :data="rowDataGrid.data"
                :tool-button="[]"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              >
                <template #tableHeader>
                  <GlobalButton :button-list="rowDataGrid.headButtonList"></GlobalButton>
                </template>
                <template #operation="{ row, $index }">
                  <GlobalButton :button-list="rowDataGrid.rowButtonList" :row-params="row" :row-index="$index"></GlobalButton>
                </template>
              </ProTable>
            </div>
          </el-tab-pane>
          <el-tab-pane label="头部按钮" name="headBtn">
            <div class="right-table">
              <ProTable
                ref="proTableBox"
                :columns="headDataGrid.columns"
                :pagination="false"
                :data="headDataGrid.data"
                :tool-button="[]"
              >
                <template #tableHeader>
                  <GlobalButton :button-list="headDataGrid.headButtonList"></GlobalButton>
                </template>
                <template #operation="{ row, $index }">
                  <GlobalButton :button-list="headDataGrid.rowButtonList" :row-params="row" :row-index="$index"></GlobalButton>
                </template>
              </ProTable>
            </div>
          </el-tab-pane>
          <el-tab-pane label="全局参数" name="config">
            <ProForm
              ref="proFormBox"
              :options="configForm.options"
              :form-cols="configForm.formCols"
              :form-attrs="configForm.formAttrs"
              :save-button="false"
              @get-model="form => (configForm.form = form)"
              @validate-form="saveConfigForm"
            >
            </ProForm>
          </el-tab-pane>
        </el-tabs>

        <div class="btn">
          <el-button type="primary" @click="saveConfig">保存配置</el-button>
        </div>
      </div>

      <!-- 表格列新增 -->
      <DialogForm
        top="1vh"
        :options="addColumnsForm.options"
        :title="addColumnsForm.title"
        :form-attrs="addColumnsForm.formAttrs"
        v-model:visible="addColumnsForm.visible"
        @get-model="form => (addColumnsForm.form = form)"
        @submit-form="saveAddColumnsForm"
      ></DialogForm>

      <!-- 按钮新增 -->
      <DialogForm
        :options="addBtnForm.options"
        :title="addBtnForm.title"
        :form-attrs="addBtnForm.formAttrs"
        v-model:visible="addBtnForm.visible"
        @get-model="form => (addBtnForm.form = form)"
        @submit-form="form => saveAddBtnForm(form, [headDataGrid, rowDataGrid])"
      ></DialogForm>
    </div>
    <Help></Help>
  </div>
</template>
<script setup lang="ts">
import { setNestedValueArr } from '../utils';
import { setNestedValue } from '@/utils/operationObject';
import { useConfigForm } from './hooks/form/configForm';
import { useDataGrid } from './hooks/use-dataGrid';
import Help from '../components/help/index.vue';
const router = useRouter();
const { dataGrid, columnsDataGrid, addColumnsForm, saveAddColumnsForm, headDataGrid, addBtnForm, saveAddBtnForm, rowDataGrid } =
  useDataGrid();

const { configForm, saveConfigForm } = useConfigForm(dataGrid);

let tabsObj = reactive({
  activeName: 'column'
});

const route = useRoute();

/**
 * table_customer 客户表格
 */
let tableId = ref<any>(0);

watch(
  () => route.fullPath,
  () => {
    init(true);
  }
);

onBeforeMount(() => init());

const init = async (flag?: boolean) => {
  const { id } = route.query;

  if (id) {
    if (tableId.value && tableId.value !== id) {
      window.location.reload();
    }
    tableId.value = id;
    const data: any = await pageJsonConfigFind(id);
    if (data) {
      const p = JSON.parse(data.json);
      console.log(p.configForm, 'p');

      Object.assign(configForm.form, p.configForm.form);

      for (let op of p.configForm.options) {
        for (let op2 of configForm.options) {
          if (op2.prop === op.prop) {
            Object.assign(op, op2, {
              changeMethod: op2.changeMethod,
              inputMethod: op2.inputMethod,
              hide: op.hide
            });
          }
        }
      }

      Object.assign(dataGrid.columns, p.dataGrid);
      Object.assign(columnsDataGrid.data, p.columnsDataGrid);
      Object.assign(rowDataGrid.data, p.rowDataGrid);
      Object.assign(headDataGrid.data, p.headDataGrid);

      dataGrid.pagination = p.useDataGrid?.pagination;
    }
  } else {
    // 直接刷新页面
    if (flag) {
      window.location.reload();
    }
  }
};

const saveConfig = async () => {
  const obj = {};

  Object.keys(configForm.form).forEach(key => {
    setNestedValue(obj, key, configForm.form[key]);
  });

  const columns = setNestedValueArr(columnsDataGrid.data);

  const useDataGrid = {
    columns,
    headButtonList: headDataGrid.data,
    rowButtonList: rowDataGrid.data,
    ...obj
  };
  console.log(configForm, 'configForm');

  const paramsJson = {
    configForm: configForm,
    dataGrid: dataGrid.columns,
    columnsDataGrid: columnsDataGrid.data,
    rowDataGrid: rowDataGrid.data,
    headDataGrid: headDataGrid.data,
    useDataGrid
  };
  const params = {
    cname: configForm.form.tableName,
    type: 'table',
    id: tableId.value || null,
    json: JSON.stringify(paramsJson)
  };

  const saveParams = !tableId.value ? await pageJsonConfigSave(params) : await pageJsonConfigUpdate(params);
  elMessage();
  routerPush(route.path, { id: saveParams.id });
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
